<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>wind management</title>
<link href="/statics/css/admin_style.css" rel="stylesheet" />
<script src="/statics/js/jquery.js"></script>
<script src="/statics/js/supe.js"></script>
</head>
<body>
<div class="wrap">
  <div class="nav">
    <ul class="cc">
    <?php
        foreach($types as $key => $item){
            $class = ($type == $key) ? ' class="current"' : '';
            echo '<li '.$class.'><a href="'.admin_url('config/groups', array('type'=>$key)).'">'.$item.'</a></li>';
        }
    ?>
    </ul>
  </div>
  <form class="J_ajaxForm" action="<?=admin_url('config/groups/save', array('type'=>$type));?>" method="post">
    <div class="table_list">
      <table width="100%" id="J_group_table">
        <col width="50">
        <col width="210">
        <col width="150">
        <thead>
          <tr>
            <td>编号</td>
            <td>头衔</td>
            <td>用户组图标</td>
            <!--td width="200">升级点数需求</td-->
            <td>操作</td>
          </tr>
        </thead>
        <tbody id="J_group_list">
          <?php foreach ($list as $item) { ?>
          <tr id="J_tr<?=$item['gid'];?>">
            <td><?=$item['gid'];?></td>
            <td><input type="text" class="input length_3" name="groupname[<?=$item['gid'];?>]" value="<?=h($item['name']);?>"></td>
            <td><a href="#" class="J_set_icon"><img src="/statics/img/level/<?=$item['image'];?>"></a>
              <input type="hidden" name="groupimage[<?=$item['gid'];?>]" value="<?=$item['image'];?>" /></td>
            <!--td><input type="number" class="input length_2" name="grouppoints[<?=$item['gid'];?>]" value="0">
              ~ <span>50</span></td-->
            <td><a href="<?=admin_url('config/groups/edit', array('gid'=>$item['gid']));?>" class="mr10">[编辑]</a> <a href="<?=admin_url('config/groups/del', array('gid'=>$item['gid']));?>" class="mr10 J_del_group">[删除]</a></td>
          </tr>
          <?php } ?>
        </tbody>
        <tbody id="J_groups_add_temp">
          <tr>
            <td></td>
            <td><input id="J_new_groupname" type="text" class="input length_3" /></td>
            <td><a href="#" class="J_set_icon"><img id="J_new_groupicon" src="/statics/img/level/0.gif" data-org="/statics/img/level/0.gif"></a>
                <input id="J_new_groupimage" type="hidden" value="0.gif" /></td>
            <!--td><input id="J_new_grouppoints" type="number" class="input length_2" name="new_grouppoints[]"></td-->
            <td><a id="J_insert_newgroup" href="" class="link_add">添加</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="btn_wrap">
      <div class="btn_wrap_pd" id="J_sub_wrap">
        <button type="submit" class="btn btn_submit J_ajax_submit_btn">提交</button>
      </div>
    </div>
    <input type='hidden' name="submitform" value="yes" />
  </form>
        <div style="display:none" id="J_icon_pop">
          <ul class="double_list cc">
            <li><a href="#" class="J_insert_icon" data-name="0.gif"><img src="http://i.autocar.com/res/images/level/0.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="1.gif"><img src="http://i.autocar.com/res/images/level/1.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="2.gif"><img src="http://i.autocar.com/res/images/level/2.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="3.gif"><img src="http://i.autocar.com/res/images/level/3.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="4.gif"><img src="http://i.autocar.com/res/images/level/4.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="5.gif"><img src="http://i.autocar.com/res/images/level/5.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="6.gif"><img src="http://i.autocar.com/res/images/level/6.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="7.gif"><img src="http://i.autocar.com/res/images/level/7.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="8.gif"><img src="http://i.autocar.com/res/images/level/8.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="9.gif"><img src="http://i.autocar.com/res/images/level/9.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="10.gif"><img src="http://i.autocar.com/res/images/level/10.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="11.gif"><img src="http://i.autocar.com/res/images/level/11.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="12.gif"><img src="http://i.autocar.com/res/images/level/12.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="13.gif"><img src="http://i.autocar.com/res/images/level/13.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="14.gif"><img src="http://i.autocar.com/res/images/level/14.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="15.gif"><img src="http://i.autocar.com/res/images/level/15.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="16.gif"><img src="http://i.autocar.com/res/images/level/16.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="17.gif"><img src="http://i.autocar.com/res/images/level/17.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="18.gif"><img src="http://i.autocar.com/res/images/level/18.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="19.gif"><img src="http://i.autocar.com/res/images/level/19.gif" align="absmiddle"></a></li>
            <li><a href="#" class="J_insert_icon" data-name="20.gif"><img src="http://i.autocar.com/res/images/level/20.gif" align="absmiddle"></a></li>
          </ul>
        </div>
</div>
</body>
<script language="javascript">

$.ajaxSetup({
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown + "\n" + XMLHttpRequest.responseText);
    }
});

var curr_icon  = null;

$(document).ready(function(){

    //添加新组
    $('#J_insert_newgroup').click(function(e){
        e.preventDefault();
        var new_groupname   = $('#J_new_groupname'),
            new_groupicon   = $('#J_new_groupicon'),
            new_groupimage  = $('#J_new_groupimage'),
            new_grouppoints = $('#J_new_grouppoints');

        if (!(new_groupname.val().replace(/\s/g, ''))) {
            new_groupname.focus();
            return false;
        }

        var s = '<tr class="ct high_light" style="display:none">'
              + '  <td></td>'
              + '  <td><input type="text" value="'+ new_groupname.val() +'" name="new_groupname[]" class="input length_3"></td>'
              + '  <td><a class="J_set_icon" href="#"><img src="'+ new_groupicon.attr('src') +'"></a>'
              + '       <input type="hidden" value="'+ new_groupimage.val() +'" name="new_groupimage[]"></td>'
              + (new_grouppoints.length ? '<td><input type="number" value="'+ new_grouppoints.val() +'" name="new_grouppoints[]" class="input length_2"></td>' : '')
              + '  <td><a class="mr10 J_del_newgroup" href="">[删除]</a></td>'
              + '</tr>';
        $(s).appendTo('#J_group_list')
            .fadeIn('slow', function(){
                $(this).removeClass('high_light');
            });;
        new_groupname.val('');
        new_groupicon.attr('src', new_groupicon.data('org'));
        new_groupimage.val('0.gif');
        new_grouppoints.val('');
    });

    //更换icon
    $('#J_icon_pop').on('click', 'a.J_insert_icon', function(e){
        e.preventDefault();
        if(curr_icon){
            $(curr_icon).find('img').attr('src', '/statics/img/level/' + $(this).data('name'));
            $(curr_icon).parent().find('input').val($(this).data('name'));
        }
        Supe.use('dialog',function() {
            $.dialog.list['iconDialog'].close();
        });
    });

    //删除未提交的用户组
    $('#J_group_list').on('click', 'a.J_del_newgroup', function(e) {
        e.preventDefault();
        var $this = $(this);
        Supe.use('dialog',function() {
            $.dialog.confirm('确定要删除吗？',function() {
               $this.parents('tr.ct').addClass('high_light')
                    .fadeOut('slow', function(){
                        $(this).remove();
                    });
            });
        });
    });

    $('#J_group_list').on('click', 'a.J_del_group', function(e) {
        e.preventDefault();
        var $this = $(this);
        var gid   = $(this).parent().parent().attr('id').replace('J_tr', '');
        Supe.use('dialog',function() {
            $.dialog.confirm('确定要删除吗？',function() {
                $.getJSON($this.attr('href'), function(data){
                    if(data.success == true)
                        callback.delete(gid);
                    else if(data.message)
                        $.dialog.alert(data.message)
                    else
                        $.dialog.alert('删除操作失败')
                });
            });
        });
    });


    //弹出图标选择框
    $('#J_group_table').on('click', 'a.J_set_icon', function(e) {
        e.preventDefault();
        curr_icon = this;
        Supe.use('dialog',function() {
            $.dialog({
                id: 'iconDialog',
                width:'400px',
                cancel:true,
                content:document.getElementById('J_icon_pop')
            });
        });
    });

    //Ajax 提交
    $('.J_ajax_submit_btn').on('click', function(e) {
        e.preventDefault();
        var btn = $(this),
            form = btn.parents('form.J_ajaxForm');
        Supe.use('ajaxForm', function(){
            form.ajaxSubmit({
                url : btn.data('action') ? btn.data('action') : form.attr('action'),            //按钮上是否自定义提交地址(多按钮情况)
                dataType    : 'json',
                beforeSubmit: function() {
                    var text = btn.text();

                    //按钮文案、状态修改
                    btn.text(text +'中...').prop('disabled',true).addClass('disabled');
                },
                success     : function(data, statusText, xhr, $form) {
                    var text = btn.text();

                    //按钮文案、状态修改
                    btn.removeClass('disabled').text(text.replace('中...', '')).parent().find('span').remove();

                    if(data.success) {
                        $( '<span class="tips_success">' + data.message + '</span>' ).appendTo(btn.parent()).fadeIn('slow').delay(1000).fadeOut(function() {
                            if(data.referer) {
                                window.location.href = data.referer;
                            }else {
                                //reloadPage(window.parent);
                                reloadPage(window);
                            }
                        });
                    } else {
                        $( '<span class="tips_error">' + data.message + '</span>' ).appendTo(btn.parent()).fadeIn('fast');
                        btn.removeProp('disabled').removeClass('disabled');
                    }
                }
            });
        });
    });

});

var callback = {
    delete: function(gid){
        $tr = $('#J_tr' + gid);
        $tr.addClass('high_light')
           .fadeOut(1000, function(){
                $(this).remove();
            });
    }
};





//重新刷新页面，使用location.reload()有可能导致重新提交
function reloadPage(win) {
    var location = win.location;
    location.href = location.pathname + location.search;
}
</script>
</html>